<template>
  <div>
    <div ref="side" class="side">
      <li
        @touchstart="touchstart(item,$event)"
        @touchmove="touchmove"
        @touchend="touchend"
        v-for="(item, index) in initBrand"
        :key="index">
        {{ item }}
      </li>
    </div>
    <div v-show="flag" class="toast">
      {{ text }}
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["letter"],
  data() {
      return {
          text: "",
          flag: false,
          // h1:''
      }
  },
  computed: {
    ...mapState(["initBrand"]),
  },
  methods: {
      //点击
    touchstart(key,event) {
      this.text = key
      this.flag = true
      // 设置当前位置
      document.documentElement.scrollTop =
        this.letter["side" + key][0].offsetTop;
        // this.h1=event.touches[0].clientY
        // console.log(this.h1);
    },
    //按下移动
    touchmove(e) {
      // { touches }
      e.preventDefault()
      let sideH = this.$refs.side.clientHeight; //div高度 374
      let height = (window.innerHeight - sideH) / 2; //div与游览器窗口上方的距离133
      let topH = e.touches[0].clientY - height; //当前鼠标Y轴距离div上方的距离
      let index = Math.floor(topH / (sideH / this.initBrand.length));
      if (index < 0) {
        index = 0;
      } else if (index >= this.initBrand.length - 1) {
        index = this.initBrand.length - 1;
      }
      this.text = this.initBrand[index]
      // console.log(document.body.offsetHeight);
      document.documentElement.scrollTop =document.body.offsetHeight*(topH/sideH)
      if(1){

      }
      //   this.letter["side" + this.initBrand[index]][0].offsetTop;
        // console.dir(this.letter["side" + this.initBrand[index]][0].offsetTop);
       
    },
      touchend() {

      this.flag = false
    },                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
  },
};
</script>

<style lang="scss" scoped>
.side {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  width: 20px;
  text-align: center;
  color: rgb(141, 140, 140);
  line-height:18px;
//   background-color: rgb(130, 181, 240);
}
.toast {
  text-align: center;
  line-height: 80px;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  z-index: 2000;
}
</style>